<template>
  <div class="form-subform-preview form-connector-preview">
    <div class="form-preview-group">
      <label>
        {{ field.displayName }}
        <span class="form-preview-notNull" v-if="field.isNull == 0">*</span>
      </label>
      <div class="form-preview-mock">
        <span class="connector-name-placeholder">
          {{ selectAppName }}
        </span>
      </div>
    </div>

    <div class="form-subform-preview-content">
      <!-- start 关联显示字段 -->
      <div class="form-subform-preview-title">{{ $t('common.base.concatField') }}</div>
      <div v-if="selectColumns && selectColumns.length" class="form-preview">
        <div
          class="form-design-preview"
          v-for="field in selectColumns"
          :key="field.enName"
        >
          <div class="form-preview-group">
            {{ field.cnName }}
          </div>
        </div>
      </div>
      <!-- end 关联显示字段 -->
    </div>

    <!-- start 自定义显示字段 -->
    <!-- <div class="form-subform-preview-title">{{ $t('formPreview.subForm.customShowTxt', language) }}</div> -->
    <div class="form-subform-preview-title">{{subFormPreviewAttribute}}</div>
    <form-design-preview
      class="form-connector-preview__design"
      v-model="subFormFieldList"
      :validate="validate"
      :is-show-design-preview-cover="false"
      :parent-field-id="field.fieldName"
      :show-form-design-tip="false"
      :draggable-group="{
        name: 'connectorCustomFields',
        pull: false,
        put: true
      }"
      @dragValChange="dragValChange"/>

    <div class="form-design-tip">
      <p>{{$t('common.form.tip.leftControlerTips')}}</p>
    </div>
    <!-- end 自定义显示字段 -->
  </div>
</template>

<script>
import { previewProps } from '@src/component/form/components/props';
/* mixin */
import FormSubFormMixin from '@src/component/form/mixin/form.subForm';
import translate from '@src/component/form/mixin/translate.js'
import {
  getSortConnectorToFieldsByShowFieldNameList
} from '@src/modules/connector/util';
import { transformI18n } from '@src/locales';
import { CONNECTOR_FIELDS_LENGTH_MAX, CONNECTOR_FIELD_FORM_TYPE } from '@src/component/form/config';

export default {
  name: 'form-connector-preview',
  mixins: [FormSubFormMixin, translate],
  props: previewProps,
  computed: {
    connector() {
      return this.field?.setting?.connector
    },
    toFields(){
      return this.connector?.actionList?.find(action => action.action === 'SELECT')?.toResponseFieldList || []
    },
    // eslint-disable-next-line vue/return-in-computed-property
    selectColumns() {
      if(this.connector) {
        let { showFieldNameList } = this.connector
        if(showFieldNameList) {
          return getSortConnectorToFieldsByShowFieldNameList(this.toFields, showFieldNameList)
        }
      }
    },
    selectAppName() {
      
      if (this.connector?.toBizTypeName) {
        return this.$t('common.connector.searchAppName', {name: this.connector.toBizTypeName})
      }
      
      return this.$t('common.connector.actionList.name1')
      
    },
    subFormPreviewAttribute(){
      return transformI18n('common.form.displayField', this.formPreviewLocale)
    },
    subFormFieldList: {
      get() {
        return this.field.subFormFieldList || this.field.setting?.subFormFieldList || [];
      },
      set(value) {
        this.update(value, 'subFormFieldList');
      }
    }
  },
  methods: {
    /* 拖拽验证 */
    validate(field) {
      // 校验选项显示模式是否是列表模式
      if (this.field.setting?.selectType != 2) {
        // this.update(2, 'selectType', true);
        this.$emit('input', { value: 2, prop: 'selectType', isSetting: true });
      }

      // 限制字段数量
      if (this.subFormFieldList.length > CONNECTOR_FIELDS_LENGTH_MAX) {
        return this.$t('common.form.preview.subForm.maxFields', {max: CONNECTOR_FIELDS_LENGTH_MAX});
      }
      
      // 限制可拖拽的字段类型
      if (!CONNECTOR_FIELD_FORM_TYPE.includes(field.formType)) {
        return this.$t('common.form.preview.subForm.notSupportTip');
      }
    },
  }
}
</script>
<style lang="scss" scoped>
@import '@src/component/form/components/FormSubForm/FormSubForm.scss';
::v-deep .form-preview-group {
  line-height: normal;
}
.form-connector-preview{
  overflow: hidden;
}
.sub-preview-empty-show {
  min-height: 62px;
  padding: 8px 12px 12px;
  background: none;
}
::v-deep .form-design-preview-disabled {
  border-color: #F0F0F0 !important;
}
.connector-name-placeholder {
  font-size: 14px;
  color: #8C8C8C;
  height: 20px;
  line-height: 20px;  
}

::v-deep .form-design-preview-disabled {
  border-color: #F0F0F0 !important;
}
::v-deep .form-design-tip{
  background:none;
  min-height:30px;
  line-height: 30px;
  margin-bottom: 10px;
  p{
    bottom:0;
  }
}
.form-connector-preview__design{
    //  padding-bottom: 0 !important;
    //  padding-top: 0 !important;
     box-sizing: border-box;
}
</style>